<template>
	<view>
		<view class="frined-list padding_30" v-for="(item,index) in newFriendsList" :key="item.id">
			<view v-if="item.follower_info" @click="toUserPage(item.follower_info.id)">
				<image v-if="item.follower_info.avatar!=''" :src="baseurl + '/' +item.follower_info.avatar" mode="aspectFill"></image>
				<image v-else src="@/static/images/avatar.png" mode="aspectFill"></image>
			</view>
			<view class="content">
				<view class="name" v-if="item.follower_info">
					{{item.follower_info.username}}
				</view>
				<view class="time-info">
					<text class="text1">关注了你</text>
					<!-- <text class="text1" style="padding-left: 20rpx;">{{item.createtime}}</text> -->
					<text class="text1" style="padding-left: 20rpx;" v-if="item.minute<60&&item.minute>0">
						{{item.minute}}分钟前
					</text>
					<text class="text1" style="padding-left: 20rpx;" v-if="item.hour<24&&item.hour>0">
						{{item.hour}}小时前
					</text>
					<text class="text1" style="padding-left: 20rpx;" v-if="item.hour>=24&&item.hour>0">
						{{item.day}}天前
					</text>
					<text class="text1" style="padding-left: 20rpx;" v-if="item.hour==0&&item.minute==0&&item.day==0">
						刚刚
					</text>
				</view>
			</view>
			<view class="follow-btn" v-if="item.relationship==1" @click="follower(0,item.follower_id)">
				回关
			</view>
			<view class="eachOther-btn" v-if="item.relationship==3" @click="follower(1,item.follower_id)">
				互相关注
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onLoad,onReachBottom} from '@dcloudio/uni-app'
	import {ref} from 'vue'
	import {getNewFriendListAPI} from '@/api/chat.js'
	import {
		throttle
	} from '@/utils/utils.js'
	import {
		useUserStore
	} from '@/store/modules/user.js'
	const userstore = useUserStore()
	const baseurl = ref('')
	const page = ref(1)
	const total = ref(0)
	const newFriendsList = ref([])
	onLoad(()=>{
		baseurl.value = uni.getStorageSync('baseUrl')
		getNewFriendList()
	})
	onReachBottom(()=>{
		  if (newFriendsList.value.length >= total.value){
		    uni.showToast({
		      title: "没有更多了",
		      icon:"none",
		      mask: true,
		      duration: 800
		    })
		    return
		  }
		  page.value++
		
		  uni.showLoading({
		    title: "正在加载...",
		    mark: true
		  })
		  getNewFriendList()
	})
	const getNewFriendList = async()=>{
		let res = await getNewFriendListAPI({page:page.value})
		if(res.code==200&&res.data){
			uni.hideLoading()
			total.value = res.data.total
			newFriendsList.value = newFriendsList.value.concat(res.data.data).filter(item=>{
				return item.follower_info!=null
			})
		}else{
			uni.hideLoading()
		}
	}
	const toUserPage = (userId)=>{
		uni.navigateTo({
			url:'/pages/user/userpage/index?userId='+userId
		})
	}
	// 关注or取关
	const follower = throttle(async (type,userId) => {
		if (type == 0) {
			let res = await userstore.followOrClose({
				id: userId,
				type: '0'
			})
			if (res.code == 200) {
				uni.$uv.toast('关注成功')
				page.value = 1
				newFriendsList.value = []
				getNewFriendList()
			}
		} else {
			let res = await userstore.followOrClose({
				id: userId,
				type: '1'
			})
			if (res.code == 200) {
				uni.$uv.toast('取关成功')
				page.value = 1
				newFriendsList.value = []
				getNewFriendList()
			}
		}
	}, 200)
</script>

<style lang="scss" scoped>
	.frined-list{
		display: flex;
		align-items: center;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}
		.content{
			flex: 1;
			margin-left: 24rpx;
			.name{
				font-weight: 400;
				font-size: 32rpx;
				color: #222222;
			}
			.time-info{
				padding: 8rpx 0;
				.text1{
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
				}
			}

		}
		.eachOther-btn{
			width: 160rpx;
			height: 64rpx;
			background: #F6F6F6;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #666666;
			line-height: 64rpx;
			text-align: center;
		}
		.follow-btn{
			width: 160rpx;
			height: 64rpx;
			background: #FE3052;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 64rpx;
			text-align: center;
		}
	}
</style>
